<template>
	<!--区域经济发展现状分析-->
	<div class="economic-situation">
		<normal-block chartID="chart1" title="各行业企业健康发展排名" :isTitle="isTitle" :height="height" style="margin-bottom:2vh">
			<template>
				<div class="economic-title">
					<p>各区县生产总值对比</p>
				</div>
				<div class="comparison-of-gross-product">
					<div class="product-chart">
						<div>
							<p class="product-title">{{ titleData.title }}</p>
							<p class="product-number">{{ titleData.sczz }}<span>{{ titleData.unit }}</span></p>
						</div>
						<div class="product-table-box">
							<el-table :data="tableData" size="mini" style="width: 100%;font-size:0.7vw" @row-click="openDetails" :row-style="rowStyle" :cell-style="cellStyle" :header-cell-style="headRowStyle">
								<el-table-column prop="name" label="区域名称" align="center" width="120">
								</el-table-column>
								<el-table-column prop="product" align="center" label="2019年生产总值">
									<template slot-scope="scope">
										{{ drawecharts(scope.row, scope.$index) }}
										<div :id="`main` + scope.$index" :style="{width:'260', height: '3.3vh'}"></div>
									</template>
								</el-table-column>
								<el-table-column prop="product" align="center" label="" width="100">
								</el-table-column>
<!--								<el-table-column prop="proportion" align="center" label="占师市生产比例" width="120">
									<template slot-scope="scope">
										{{ scope.row.proportion }}%
									</template>
								</el-table-column>-->
							</el-table>
						</div>
					</div>
					<div class="product-map-bg">
						<div class="product-map">
							<bashi-map :map-data="mapData" style="height:75vh"></bashi-map>
						</div>
					</div>
				</div>
			</template>
		</normal-block>
		<!--
		<el-row :gutter="20">
			<el-col span="12">
				<chart-block chartID="chart1" titleType="blueBig" :title="regionalismOptionData.title" :optionData="regionalismOptionData" chartType="getStackBar" height="32vh"></chart-block>
			</el-col>
			<el-col span="12">
				<chart-block chartID="chart2" titleType="blueBig" :title="developmentAreaOptionData.title" :optionData="developmentAreaOptionData" chartType="getStackBar" height="32vh"></chart-block>
			</el-col>
		</el-row>
		-->
		<chart-block chartID="chart3" titleType="blueBig" :title="comparisonAddedOptionData.title" :optionData="comparisonAddedOptionData" chartType="getStackBar" height="32vh" style="margin-top:2vh"></chart-block>
	</div>
</template>

<script>
//import echarts from "echarts";
import eChartsOption from "@/const/eChartsOption";
import {getCommonData10} from '@/api/pages.js'

export default {
	name: "economic-situation",
	components: {
		ChartBlock: () => import('@/components/chart-block'),
		NormalBlock: () => import('@/components/normal-block'),
		BashiMap: () => import('@/components/map/bashi-map')
	},
	props: {},
	data() {
		return {
			isTitle: false,
			regionalismOptionData: {
				title: '',
				categoryAxis: [], //类目轴数据
				seriesData: [
					{
						name: '', //如果有图例，这个就不能为空
						data: [], //数据
						unit: '', //数据的单位
					},
				],
				// color: ["#98d9ff", "#4a97ff", "#007ae1"],
				color: ["#03cefa", "#fd664d", "#f1db25"],

			},
			regionalismOptionDataShow: false,
			developmentAreaOptionData: {
				title: '',
				categoryAxis: [], //类目轴数据
				seriesData: [
					{
						name: '', //如果有图例，这个就不能为空
						data: [], //数据
						unit: '', //数据的单位
					},
				],
				color: ["#03cefa", "#fd664d", "#f1db25"],

			},
			developmentAreaOptionDataShow: false,
			comparisonAddedOptionData: {
				title: '',
				categoryAxis: [], //类目轴数据
				seriesData: [
					{
						name: '', //如果有图例，这个就不能为空
						data: [], //数据
						unit: '', //数据的单位
					},
				],
				// color: ["#2fffda", "#00e64c", "#008f83"],
				color: ["#03cefa", "#fd664d", "#f1db25"],

			},
			comparisonAddedOptionDataShow: false,
			tableData: [],
			maxdata: [],
			max: "",
			height: "95vh",
			mapData: {
				mapData: [],
				effectData: [],
				scatterData: [],
			},
			titleData: []
		}
	},
	computed: {},
	created() {
	},
	mounted() {
		if (document.body.clientWidth === 1366) {
			this.height = "110vh"
		} else {
			this.height = "95vh"
		}
		this.getMapData()
		this.shiheziEconomic()
    this.developmentareaEconomic()
		this.addValueEconomic()
		this.shiheziTotalValue()
		this.shiheziTableTotalValue()
	},
	methods: {
		//地图展示（最近一年各个区域的生产总值）
		getMapData() {
			getCommonData10({busiCode: 'C048'}).then(res => {
				if (res.data.code === 200) {
					res.data.data.list.map((item, index) => {
						this.mapData.mapData.push({
							name: item.name,
							value: item.product,
							unit:item.unit
						})
						if (item.name === '石河子市') {
							this.mapData.effectData.push({
								name: item.name,
								value: [item.longtitude, item.latitude, item.product, item.size],
								unit: item.unit
							})
						} else {
							this.mapData.scatterData.push({
								name: item.name,
								value: [item.longtitude, item.latitude, item.product, item.size],
								unit: item.unit
							})
						}
					})
				}
			}).catch(err => {
			})
		},
		rowStyle({row, rowIndex}) {
			let styleJson = {}
			if (rowIndex % 2 === 0) {
				styleJson = {'background': 'rgba(0,16,75,0)', 'color': '#fff', 'cursor': 'pointer'}
			} else {
				styleJson = {'background': 'rgba(0,32,194,0)', 'color': '#fff', 'cursor': 'pointer'}
			}
			return styleJson
		},
		cellStyle({row, column, rowIndex, columnIndex}) {
			return 'padding:4px 0'
		},
		headRowStyle({row, rowIndex}) {
			let styleJson = {}
			return {'background': 'rgba(0,36,255,0)', 'color': '#fff', 'border-color': 'rgba(71,182,255,0.4)'}
		},
		drawecharts() {
			this.TransverseBarOptionData = {
				title: '',
				categoryAxis: [],
				seriesData: [arguments[0].proportion],
				unit: '',
				imgSrc: require('../../assets/images/6icon.png'),//图片
				topColor: '#01bcbf',
				bottomColor: '#e2a737'
			}
			let option = eChartsOption.getTransverseBar(this.TransverseBarOptionData)
			option.xAxis[0].show = false
			option.xAxis[0].max = this.max
			option.yAxis[0].show = false
			option.grid = {}
			let chartid = 'main' + arguments[1];
			this.$nextTick(() => {
				let myChart = this.$echarts.init(document.getElementById(chartid));
				myChart.setOption(option);
			})
		},
		openDetails(row) {
			if (row.name === "石河子市") {
				this.$router.push({path: '/region/economicShihezi', query: {name: row.name, nameId: row.id}});
			} else if (row.name === "经济技术开发区") {
				this.$router.push({path: '/region/economicDevelopmentArea', query: {name: row.name, nameId: row.id}});
			} else {
				this.$router.push({path: '/region/economicRoundField', query: {name: row.name, nameId: row.id}});
			}
		},
		//石河子行政区生产总值变化
		shiheziEconomic() {
			getCommonData10({busiCode: 'E076'}).then(res => {
				if (res.data.code === 200) {
					this.regionalismOptionData.title = res.data.data.title
					this.regionalismOptionData.categoryAxis = res.data.data.categoryAxis
					this.regionalismOptionData.seriesData = res.data.data.seriesData
					this.regionalismOptionDataShow = true
				}
			}).catch(err => {
			})
		},
		//经济技术开发区生产总值变化
		developmentareaEconomic() {
			getCommonData10({busiCode: 'E077'}).then(res => {
				if (res.data.code === 200) {
					this.developmentAreaOptionData.title = res.data.data.title
					this.developmentAreaOptionData.categoryAxis = res.data.data.categoryAxis
					this.developmentAreaOptionData.seriesData = res.data.data.seriesData
					this.developmentAreaOptionDataShow = true
				}
			}).catch(err => {
			})
		},
		//2019年各团场三次产业增加值对标
		addValueEconomic() {
			getCommonData10({busiCode: 'E078'}).then(res => {
				if (res.data.code === 200) {
					this.comparisonAddedOptionData.title = res.data.data.title
					this.comparisonAddedOptionData.categoryAxis = res.data.data.categoryAxis
					this.comparisonAddedOptionData.seriesData = res.data.data.seriesData
					this.comparisonAddedOptionDataShow = true
				}
			}).catch(err => {
			})
		},
		//师市生产总值-文字概述
		shiheziTotalValue() {
			getCommonData10({busiCode: 'C046'}).then(res => {
				if (res.data.code === 200) {
					this.titleData = res.data.data.list[0]
				}
			}).catch(err => {
			})
		},
		//各行政区生产总值-图表展示
		shiheziTableTotalValue() {
			getCommonData10({busiCode: 'C047'}).then(res => {
				if (res.data.code === 200) {
					this.tableData = res.data.data.list
					this.tableData.forEach((item, index) => {
						this.maxdata.push(item.proportion)
					})
					this.maxdata.sort(function (a, b) {
						return a - b;
					});
					this.max = parseInt(this.maxdata[this.maxdata.length - 1])
				}
			}).catch(err => {
			})
		},
	},
	watch: {}
}
</script>

<style scoped lang="scss">
.economic-situation {
	padding: 6vh 1.3vw 4vh;

	.economic-title {
		color: #50dcff;
		text-align: center;
		font-size: 0.9vw;
		background: url("../../assets/images/economic_title.png") top center no-repeat;
		background-size: 100% 100%;
		margin-top: 1.5vh;
		padding: 0 4vw;

		p {
			height: 8vh;
			line-height: 8vh;
			font-family: "Microsoft YaHei";
			letter-spacing: 1px;
		}
	}

	.comparison-of-gross-product {
		padding: 1vh 1vw;
		height: calc(100% - 10vh);
		display: flex;
		justify-content: space-between;

		.product-chart {
			background: rgba(0, 0, 0, 0.3);
			padding-top: 1vh;
			height: 100%;
			width: 49.5%;

			.product-title {
				background: linear-gradient(to bottom, #46b1f0, #2793de);
				background-clip: text;
				color: transparent;
				text-align: center;
				font-size: 1vw;
				font-weight: 600;
			}

			.product-number {
				background: linear-gradient(to bottom, #ffe675, #ffae0d);
				background-clip: text;
				color: transparent;
				text-align: center;
				font-size: 1.2vw;
				font-weight: 600;

				span {
					font-size: 0.8vw;
				}
			}
		}

		.product-map-bg {
			background: url("../../assets/images/bg_linecirclemap.png") bottom center no-repeat;
			background-size: 100% 100%;
			height: 100%;
			width: 49.5%;
		}

		.product-map {
			// background: rgba(0, 0, 0, 0.3);
			height: 100%;
			width: 100%;

		}
	}

	.product-table-box {
		width: 96%;
		height: calc(100% - 6vh);
		padding-bottom: 2vh;
		overflow-y: auto;
		padding-top: 1.5vh;
		box-sizing: border-box;
		margin-left: 2%;
		font-size: 0.7vw;

		/deep/ {
			.el-table {
				border: 1px solid rgba(71, 182, 255, 0.4);
				border-right: 0;
				font-size: 0.7vw;

				tbody tr {
					&:hover {
						td {
							background-color: rgba(0, 20, 86, 0);
						}
					}
				}
			}
		}

		/deep/ {
			.el-table--mini,
			.el-table--small {
				background: none;
			}
		}

		/deep/ {
			.el-table::before {
				height: 0px;
			}
		}

		/deep/ {
			.el-table th,
			.el-table tr {
				background: none;
				border-right: 1px solid rgba(71, 182, 255, 0.4);
			}
		}

		/deep/ {
			.el-table td {
				background: none;
				border-right: 1px solid rgba(71, 182, 255, 0.4);
				border-bottom: 0;
			}
		}

		/deep/ {
			.el-table thead th {
				font-size: 0.7vw;
			}
		}

		/deep/ {
			.el-table--mini {
				font-size: 0.7vw !important;
			}
		}

		/deep/ {
			thead tr :nth-child(2) {
				margin-left: 60px;
			}
		}

		/deep/ {
			.el-table tr :nth-child(2) {
				border-right: 0;
			}
		}

		/deep/ {
			.el-table tr :nth-child(3) {
				color: #ffa82c;
			}
		}
	}
}
</style>
